<template>
  <div class="resource container">
    <div class="search-box">
      <el-row :gutter="20">
        <el-form label-width="100px" size="small" class="searchForm">
          <el-col :span="5">
            <el-form-item label="审批状态:">
              <el-select
                v-model="params.status"
                filterable
                placeholder="选择审批状态"
                clearable
                @change="search"
              >
                <el-option
                  v-for="item in stateList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="转移人">
              <el-select
                v-model="params.userId"
                filterable 
                placeholder="选择审批状态"
                clearable
                @clear="search"
              >
                <el-option
                  v-for="item in sysUserList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="被转移人">
              <el-select
                v-model="params.moveUser"
                filterable 
                placeholder="选择审批状态"
                clearable
                @clear="search"
              >
                <el-option
                  v-for="item in sysUserList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-button
              @click="search"
              icon="el-icon-search"
              size="mini"
              type="primary"
              >搜索</el-button
            >
            <el-button
              @click="cancelData"
              icon="el-icon-refresh"
              size="mini"
              type="warning"
              >重置</el-button
            >
          </el-col>
        </el-form>
      </el-row>
    </div>

    <div>
      <div class="handle-box">
        <el-button
          type="danger"
          icon="el-icon-delete"
          class="handle-del mr10"
          size="mini"
          @click="delAllSelection"
          :disabled="isOperate"
          >批量拒绝</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          class="mr10"
          size="mini"
          :disabled="isOperate"
          @click="getAllSelection"
        >
          批量通过
        </el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        :max-height="tableHeight"
        style="width: 100%;"
        border
        class="table"
        ref="multipleTable99"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column label="转移人" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column label="被转移人" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.moveUserName }}
          </template>
        </el-table-column>
        <el-table-column label="审批状态" min-width="120" align="center">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.status == 0">待审批</el-tag>
            <el-tag type="primary" v-if="scope.row.status == 1"
              >审批通过</el-tag
            >
            <el-tag type="danger" v-if="scope.row.status == -1"
              >审批拒绝</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center" min-width="160">
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="180"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-view"
              @click="handleView(scope.row)"
              >查看</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              v-if="scope.row.status == 0"
              @click="handleApproval(scope.row)"
              >审批</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getData00"
        />
      </div>
    </div>

    <!-- 查看审批 -->
    <el-dialog :title="title666" :visible.sync="dialogVisible" width="1000px">
      <el-form
        :model="formData"
        label-width="120px"
        size="small"
        class="form-box"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="转移人" prop="userName">
              <el-input v-model="formData.userName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="被转移人" prop="moveUserName">
              <el-input v-model="formData.moveUserName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公司名称" prop="companyName">
              <el-input v-model="formData.companyName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人">
              <el-input v-model="formData.customerName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="customerPhone">
              <el-input v-model="formData.customerPhone" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公司地址">
              <el-input v-model="formData.address" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="座机电话">
              <el-input v-model="formData.landlinePhone" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户等级">
              <el-select
                v-model="formData.grade"
                placeholder="请选择客户等级"
                disabled
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.gradeValue"
                  :label="item.gradeName"
                  :value="item.gradeValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户标签">
              <!-- <el-autocomplete
                class="inline-input"
                v-model="formData.label"
                :fetch-suggestions="querySearch"
                placeholder="请输入标签"
                value-key="context"
                clearable
                disabled
              ></el-autocomplete> -->
              <el-select v-model="formData.label" disabled clearable placeholder="请选择标签">
                <el-option
                  v-for="item in labels"
                  :key="item.id"
                  :label="item.context"
                  :value="item.context"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.email" disabled></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="所属洲">
              <el-input v-model="formData.continent" disabled></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="省份">
              <el-input v-model="formData.country" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="城市">
              <el-input v-model="formData.city" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户来源">
              <el-input v-model="formData.source" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="新/老客户">
              <el-select
                v-model="formData.customerType"
                placeholder="请选择新老客户"
                disabled
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户类型">
              <el-select
                v-model="formData.customerRole"
                placeholder="请选择客户类型"
                disabled
              >
                <el-option
                  v-for="dict in customerRoleList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="title666 == '审批'">
        <el-button
          @click="sure"
          type="primary"
          size="small"
          icon="el-icon-check"
          >通过</el-button
        >
        <el-button
          @click="reject"
          type="danger"
          size="small"
          icon="el-icon-close"
          >拒绝</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryApproval, checkData, getInfo, getLabels,queryLevel } from "@/api/resourcedN";
import { listUser } from "@/api/system/user";

// import logDialog from "./logDialog.vue";
export default {
  //   components: { logDialog },
  props: [],
  data() {
    return {
      tableHeight: 0,
      labels: [],
      label: "",
      input: "",
      value888: "",
      openFlag: true,
      addVisible: false,
      loading: true,
      show: false,
      //数据
      tableData: [],

      params: {
        pageNum: 1,
        pageSize: 10,
        status: null,
        moveUser: null,
        userId: null
      },
      pageTotal: 0,
      //删除
      multipleSelection: [],
      multipleSelection1: [],
      delList: [],

      customer: {
        customerId: ""
      },
      stateList: [
        {
          id: 0,
          title: "待审批"
        },
        {
          id: 1,
          title: "审批通过"
        },
        {
          id: -1,
          title: "审批拒绝"
        }
      ],
      typeList: [
        {
          id: '0',
          title: "未知"
        },
        {
          id: '1',
          title: "新客户"
        },
        {
          id: '2',
          title: "老客户"
        }
      ],
      customerRoleList: [],
      levelList: [],

      formData: {},
      dialogVisible: false,
      title666: "",
      // 审批id
      checkId: null,
      // 转移人、被转移人列表
      sysUserList: [],
      isOperate: true
    };
  },
  computed: {},
  mounted(){
    this.getLabels();
    this.$nextTick(function() {
      this.tableHeight = window.innerHeight - this.$refs.multipleTable99.$el.offsetTop - 150;
      let self= this;
      window.onresize = function(){
        self.tableHeight = window.innerHeight - self.$refs.multipleTable99.$el.offsetTop - 150;
      }
    });
    console.log(this.tableHeight,'表格高度-------')
  },
  created() {
    this.getData00();
    this.getDicts("customerRole").then(response => {
      this.customerRoleList = response.data;

    });
    this.getSysUserList();
    this.fetchLevelList();
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(parseInt(value) * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    }
  },
  watch: {},
  directives: {
    "el-select-loadmore": {
      bind(el, binding) {
        var _this = this;
        const SELECTWRAP_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP_DOM.addEventListener("scroll", function() {
          const condition =
            this.scrollHeight - this.scrollTop - 1 <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      }
    }
  },
  methods: {
    getSysUserList() {
      listUser({
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        this.sysUserList = res.rows;
      });
    },
    handleView(row) {
      this.formData = {};
      this.dialogVisible = true;
      this.title666 = "查看";
      getInfo(row.customerId).then(res => {
        if (res.code == 200) {
          //   console.log(res, "看看详情-----------");
          this.formData = res.data;
          // this.formData.customerRole = parseInt(res.data.customerRole);
          // this.formData.customerRole = res.data.customerRole + '';
          this.formData.userName = row.userName;
          this.formData.moveUserName = row.moveUserName;
        }
      });
    },
    handleApproval(row) {
      getInfo(row.customerId).then(res => {
        if (res.code == 200) {
          //   console.log(res, "看看详情-----------");
          this.formData = res.data;
          // this.formData.customerRole = parseInt(res.data.customerRole);
          // this.formData.customerRole = res.data.customerRole!=null ? res.data.customerRole + '' : res.data.customerRole;
          this.formData.userName = row.userName;
          this.formData.moveUserName = row.moveUserName;
        }
      });
      this.dialogVisible = true;
      this.title666 = "审批";
      this.checkId = row.id;
    },
    fetchLevelList() {
      queryLevel().then(res => {
        this.levelList = res.rows;
        console.log(this.levelList,'等级列表')
      });
    },
    querySearch(queryString, cb) {
      console.log(queryString, this.labels);
      var restaurants = this.labels;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.context
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    getLabels() {
      getLabels({
        pageNum: 1,
        pageSize: 9999,
      }).then((res) => {
        if (res.code == 200) {
          this.labels = res.rows;
        }
      });
    },

    loadmore() {
      this.transferPeopleParams.pageNum++;
      this.getList();
    },

    openSearch() {
      this.openFlag = !this.openFlag;
    },
    cancelData() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        status: null,
        moveUser: null,
        userId: null
      };
      this.getData00();
    },
    formatLevel(val) {
      var str = this.levelList.find(function(item) {
        return item.gradeValue == val;
      });
      if (str) return str.gradeName;
    },
    formatState(val) {
      var str = this.stateList.find(function(item) {
        return item.id == val;
      });
      if (str) return str.title;
    },
    formatType(val) {
      var str = this.typeList.find(function(item) {
        return item.id == val;
      });
      if (str) return str.title;
    },
    formatRole(val) {
      var str = this.customerRoleList.find(function(item) {
        return (item.dictValue = val);
      });
      if (str) return str.dictLabel;
    },

    // 批量操作
    handleSelectionChange(val) {
      // console.log('监听一下------------',val)
      if(val.length != 0){
        this.multipleSelection = val.map(item => item.id);
        this.isOperate = false;
      }else{
        this.isOperate = true;
      }
    },
    // 批量同意
    getAllSelection() {
      if (this.multipleSelection.length == 0) {
        return this.msgError("必须选择一项进行操作！");
      } else {
        var str = this.multipleSelection.join(",");
      }
      this.$confirm("审批同意吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.sureData(str);
          this.multipleSelection = [];
        })
        .catch(() => {});
    },
    // 批量拒绝
    delAllSelection() {
      if (this.multipleSelection.length == 0) {
        return this.msgError("必须选择一项进行操作！");
      } else {
        var str = this.multipleSelection.join(",");
      }
      this.$confirm("确定要拒绝吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.rejectData(str);
          this.multipleSelection = [];
        })
        .catch(() => {});
    },
    reject() {
      this.$confirm("确定要拒绝吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.rejectData(this.checkId);
        })
        .catch(() => {});
    },
    sure() {
      this.$confirm("确定审批通过吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.sureData(this.checkId);
        })
        .catch(() => {});
    },
    sureData(id) {
      checkData({
        id: id,
        status: 1
      })
        .then(res => {
          if (res.code == "200") {
            this.$message.success("转移资源成功");
            this.getData00();
            this.isOperate = true;
            this.dialogVisible = false;
          } else {
            this.$message.error("转移资源失败");
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    rejectData(id) {
      checkData({
        id: id,
        status: -1
      })
        .then(res => {
          if (res.code == "200") {
            this.$message.success("拒绝转移成功");
            this.getData00();
            this.isOperate = true;
            this.dialogVisible = false;
          } else {
            this.$message.error("拒绝转移失败");
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    //获取数据
    getData00() {
      var _this = this;
      let data = this.params;
      this.loading = false;
      queryApproval(data)
        .then(res => {
          if (res.code == "200") {
            this.tableData = res.rows;
            this.pageTotal = res.total;
            this.loading = false;
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },

    search() {
      this.$set(this.params, "pageNum", 1);
      this.paramsFlag = 0;
      this.getData00();
    },
    handleSearchOpen() {
      this.addVisible = true;
      this.params = {
        pageNum: 1,
        pageSize: 10,
        status: null,
        moveUser: null,
        userId: null
      };
    },
    handleSearch() {
      this.addVisible = false;
      this.paramsFlag = 1;
      this.$set(this.params, "pageNum", 1);
      this.getData00();
    }
  }
};
</script>

<style>
.timeDate .el-date-editor {
  width: 50%;
  float: left;
}
</style>
<style scoped>
.container {
  padding: 5px 20px !important;
}
.handle-box {
  margin-bottom: 10px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #f57506;
}
.green {
  color: green;
  cursor: pointer;
}
.blue {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.search-box {
  margin-bottom: 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.searchForm .el-form-item--mini.el-form-item,
.searchForm .el-form-item--small.el-form-item {
  margin-bottom: 1px;
}
/* .search-box .el-input {
  width: 200px;
  margin-right: 10px;
} */
</style>
